<template>
  <div class="contentCon shadow"  id="AlertBottom">
    <i class="fa fa-dot-circle-o pull-right" style="margin-top: .1rem" aria-hidden="true" @click="hide"></i>
    <div class="content midfont" style="text-align: center">
      <i :class="dIcon" aria-hidden="true" v-if="dIcon"></i>
      {{content}}
    </div>
  </div>
</template>
<style scoped>
#AlertBottom{
  display: none;
  background-color: #ffffff;border-radius: .3rem .3rem 0 0;padding: .5rem;box-sizing: border-box;
  position: fixed;z-index: 9999;
  width: 10rem;
  bottom: 0;
  left: 0;
  color: #333333;
}
</style>
<script>
 export default {
   props:{
     autoClose:{
       default:false
     },
     autoCloseDelay:{
       default: 3000
     },
     icon:{
       default:''
     }
   },
   data(){
     return {
       is_show:0,
       dAutoClose:this.autoClose,
       dAutoCloseDelay:this.autoCloseDelay,
       content: "",
       dIcon:this.icon
     }
   },
   methods:{
     setAutoClose(b){
       this.dAutoClose = b
       return this
     },
     setIcon(v){
       this.dIcon = v
       return this
     },
     show(){
       let _this = this
       $("#AlertBottom").slideDown("fast")
       if (_this.dAutoClose){
         setTimeout(_this.hide,_this.dAutoCloseDelay)
       }
     },
     hide(){
       let _this = this
       $("#AlertBottom").slideUp("fast")
     },
     setContent(content){
       this.content = content
       return this
     }
   }
}
</script>
